<template>
  <div class="myHomeProduct center" v-for="item in goodsData" :key="item.id">
    <!-- 首页下部分类 -->
    <my-title :name="item.name">
      <template #center>
        <div class="sub">
          <router-link
            class="black"
            to="/"
            v-for="items in item.children"
            :key="items.id"
            >{{ items.name }}</router-link
          >
        </div>
      </template>
      <template #button>
        <router-link to="/" class="green"
          >查看更多<i class="icon-xiangyoujiantou iconfont"></i
        ></router-link>
      </template>
    </my-title>
    <div class="box">
      <router-link to="/" class="cover"
        ><img :src="item.picture" alt="" />
        <div class="cover_desc">
          <div class="left">{{ item.name }}馆</div>
          <div class="right">{{ item.saleInfo }}</div>
        </div></router-link
      >
      <div class="goods_list">
        <my-goods-card
          v-for="items in item.goods"
          :key="items.id"
          :img="items.picture"
          :name="items.name"
          :desc="items.desc"
          :price="items.price"
          @productHandle="productHandle(items.id)"
        ></my-goods-card>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import myTitle from "@/components/communal/myTitle.vue";
import myGoodsCard from "@/components/communal/myGoodsCard.vue";
import { getHomeProduct } from "@/api/home/home";
export default {
  props: {},
  name: "myHomeProduct",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      goodsData: [],
      productHandle: (id) => {
        // console.log(id);
        router.push("/product/" + id);
      },
    });
    getHomeProduct().then((res) => {
      data.goodsData = res.result;
    });
    return { ...toRefs(data) };
  },
  components: {
    myTitle,
    myGoodsCard,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myHomeProduct {
  width: 1240px;
  margin: 0 auto;
  .sub {
    width: 432px;
    text-align: right;
    margin-right: 80px;
    a {
      padding: 2px 12px;
    }
  }
  .box {
    display: flex;
    .cover {
      width: 240px;
      height: 610px;
      margin-right: 10px;
      position: relative;
      .cover_desc {
        width: 188px;
        height: 66px;
        display: flex;
        font-size: 18px;
        color: #fff;
        line-height: 66px;
        font-weight: 400;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate3d(0, -50%, 0);
        text-align: center;
        overflow: hidden;
        .left {
          width: 76px;
          background: rgba(0, 0, 0, 0.9);
        }
        .right {
          flex: 1;
          background: rgba(0, 0, 0, 0.7);
        }
      }
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
    .goods_list {
      width: 990px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  }
}
</style>